<script>
    export default {
      name: "App",
    }
</script>

<template>
  <div class="container">
    <nav>
      <router-link to="/home" class="link" active-class="active">Home</router-link>
      <router-link to="/about" class="link" active-class="active">About</router-link>
    </nav>
    
    <div class="show">
      <router-view></router-view>
    </div>
  </div>
</template>


<style scoped>
  .container {
    margin: 20px 0;
  }
  .link {
    width: 40px;
    height: 25px;
    padding: 14px;
    align-items: center;
    text-decoration: none;  
  }
  .active {
    border-radius: 2em;
    background-color: rgb(59, 130, 246);
    color: aliceblue;
  }
  .show {
    margin: 30px 20px 30px 2px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 2em;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
</style>